<template>
    <div>
        <div class="search-form-context">
            <el-form ref="searchForm" :model="searchForm" label-width="60px" label-position="left"
                     :rules="searchForm.validation">
                <el-form-item label="设备" prop="device">
                    <el-select v-model="searchForm.device.selected" placeholder="选择设备">
                        <el-option v-for="op in searchForm.device.list" :key="op.value" :label="op.label"
                                   :value="op.value"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="金币数" prop="gold">
                    <el-input v-model="searchForm.resource.gold" maxlength="10" type="number" placeholder="未限制"
                              clearable/>
                </el-form-item>
                <el-form-item label="圣水数" prop="water">
                    <el-input v-model="searchForm.resource.water" maxlength="10" type="number" placeholder="未限制"
                              clearable/>
                </el-form-item>
                <el-form-item label="重油数" prop="oil">
                    <el-input v-model="searchForm.resource.oil" maxlength="10" type="number" placeholder="未限制"
                              clearable/>
                </el-form-item>
                <p class="small-describe"><span class="danger">*</span>通过设置资源数，筛选出大于设置资源的对手</p>
                <el-form-item>
                    <el-button type="primary" @click="handleStartSearch" v-if="!searchForm.searchStatus">开始搜索
                    </el-button>
                    <el-button type="danger" @click="handleStopSearch" v-if="searchForm.searchStatus">停止搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        name: "SearchResourcePage",
        data() {
            return {
                searchForm: {
                    device: {
                        list: [
                            {
                                label: '小米手机',
                                value: 0,
                            },
                            {
                                label: '红米手机',
                                value: 1
                            }
                        ],
                        selected: null
                    },
                    resource: {
                        gold: '',
                        water: '',
                        oil: ''
                    },
                    searchStatus: false,
                    validation: {
                        device: [{
                            required: true, message: '请选择设备', trigger: 'blur'
                        }],
                        gold: [{
                            min: 3, max: 10, message: '资源长度限制为 3 - 10 位以内', trigger: 'blur'
                        }],
                        water: this.gold,
                        oil: this.gold
                    }
                }
            }
        },
        methods: {
            handleStartSearch() {
                this.searchForm.searchStatus = true;
            },
            handleStopSearch() {
                this.searchForm.searchStatus = false;
            }
        }
    }
</script>

<style lang="scss" scoped>
    .search-form-context {
        width: 80%;
        margin: 30px auto;

        .small-describe {
            font-size: 12px;
            color: gray;
            margin-bottom: 20px;

            .danger {
                color: red;
            }
        }
    }
</style>
